<template>
  <div>
    <el-card class="sku-card">
      <el-button type="primary" @click="addSku">新增</el-button>
      <el-button type="danger" @click="batchDel">批量删除</el-button>
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%"
        class="tableList"
        @selection-change="handleSelectionChnage"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="规格名称" />
        <el-table-column prop="default" label="规格数据" />
        <el-table-column prop="order" label="排序" />
        <el-table-column label="状态">
          <template #default="scope">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.status"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <el-button type="primary" @click="editSku(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" @click="delSku(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增弹框 -->

    <el-dialog
      v-if="showDialog"
      v-model="dialogFormVisible"
      :title="titleVal"
      width="500"
      @close="handleClose"
    >
      <el-form :model="form" ref="formRef" :rules="formRule">
        <el-form-item
          label="规格名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="规格数据"
          :label-width="formLabelWidth"
          prop="default"
        >
          <TagInput ref="tagInputRef" v-model="form.default"></TagInput>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input-number
            v-model="form.order"
            :inactive-value="0"
            :active-value="1"
          />
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="form.status"
            :inactive-value="0"
            :active-value="1"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="submitOk"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { getSkuListFn, addSkuFn, editSkuFn, delSkuFn } from "@/api/sku.js";
import { ref, reactive } from "vue";
import TagInput from "@/components/TagInput.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const page = ref(1);
const tableData = ref([]);
// 获取商品列表
const getSkuList = async () => {
  const res = await getSkuListFn(page.value);
  if (res.msg && res.msg !== "ok") return;
  tableData.value = res.data.list;
};
getSkuList();

// 新增
const dialogFormVisible = ref(true);
const showDialog = ref(false);
const titleVal = ref("新增");
// 表单数据
const form = ref({
  name: "",
  default: "",
  order: 1,
  status: 1,
});
const formLabelWidth = "120px";
const formRef = ref(null);
const formRule = reactive({
  name: [
    {
      required: true,
      message: "请填写规格名称",
      trigger: "blur",
    },
  ],
  default: [
    {
      required: true,
      message: "请选择规格数据",
      trigger: "blur",
    },
  ],
});

const addSku = () => {
  showDialog.value = true;
};
const submitOk = () => {
  formRef.value.validate(async (isValid) => {
    if (!isValid) return;
    if (titleVal.value == "新增") {
      const res = await addSkuFn(form.value);
      if (res.masg && res.msg !== "ok") return;
      ElMessage.success("新增成功");
    } else {
      const res = await editSkuFn(skuId.value, form.value);
      if (res.masg && res.msg !== "ok") return;
      ElMessage.success("编辑成功");
    }
    showDialog.value = false;
    getSkuList();
  });
};
const tagInputRef = ref(null);
const handleClose = () => {
  formRef.value.resetFields();
  showDialog.value = false;
};
// 编辑
const skuId = ref("");
const editSku = (row) => {
  titleVal.value = "编辑";
  skuId.value = row.id;
  form.value.name = row.name;
  form.value.default = row.default;
  form.value.order = row.order;
  form.value.status = row.status;
  showDialog.value = true;
};
// 删除
const delSku = (id) => {
  delSkuok([id]);
};
// 批量删除
const batchDel = () => {
  if(!skuIds.value.length) return ElMessage.error('请选择数据')
  skuIds.value = skuIds.value.map(item => item.id)
  delSkuok(skuIds.value);
};
// 批量删除数组id
const skuIds = ref([]);
const handleSelectionChnage = (val) => {
  skuIds.value = val;
};
const delSkuok = async (params) => {
  const isDel = await ElMessageBox.confirm("是否删除", "删除", {
    confrimButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  });
  if (isDel === "confirm") {
    const res = await delSkuFn(params);
    if (res.msg && res.msg !== "ok") return;
    ElMessage.success("删除成功");
  }
  getSkuList();
};
</script>

<style lang="less" scoped>
.sku-card {
  margin-top: 20px;
  .tableList {
    margin-top: 20px;
  }
}
</style>
